<script>
import {listAlgor,addOrupdateAlgor,getOneAlgor,delAlgor} from '@/api/algor/algor'
export default {
  name: "index",
  created() {
    this.searchalgor();
  },
  data(){
    return{
      queryParam:{
        pageNum: 1,
        pageSize:10
      },
      total:0,
      loading:true,
      algorinput:'',
      tableData:[],
      rules:{
        algorName: [
            { required: true, message: '请输入算法名称', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '算法算法调用码不能为空', trigger: 'blur' }
        ],
      },

      formdialog:{
        open:false,
        title: '新增算法'
      },

      AddFormdialogVisible:false,
      EditFormdialogVisible:false,
      DeleteFormdialogVisible:false,
      AddForm:{
      },
      EditForm:{
        name: '',
        type: '',
        state: '',
        remark: ''
      },
      formLabelWidth:'120px',
      currentPage:1
    }
  },
  methods:{
    searchalgor(e){
      //查询
      listAlgor(this.queryParam).then(resp=>{
        this.tableData = resp.rows;
        this.total = resp.total;
        this.loading = false
      })
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.getShopList(); //搜索按钮的回调
      }
    },
    openAddDialog(){
      this.AddForm = {}
      this.formdialog.open = true;
      this.formdialog.title = '添加算法'
    },
    handleEdit(row){
      console.log(row)
      getOneAlgor(row.algorId).then(resp=>{
        console.log(resp)
        this.AddForm = resp.data;
        this.formdialog.open = true;
        this.formdialog.title = '编辑算法'
      })
    },
    handleDelete(row) {
      this.$model.confirm('是否确认删除算法名为"' + row.algorName + '"的数据项？').then(function() {
        return delAlgor(row.algorId);
      }).then(() => {
        this.searchalgor();
        this.$model.msgSuccess("删除成功");
      }).catch(() => {});
    },
    submitFrom(){
      this.$refs["form"].validate(valid => {
        if (valid){
          if (this.AddForm.algorId){
            // 修改
            console.log("修改")
            addOrupdateAlgor(this.AddForm).then(resp=>{
              console.log(resp)
              this.$model.msgSuccess("修改成功")
              this.formdialog.open = false
              this.searchalgor()
            })
          }else {
            addOrupdateAlgor(this.AddForm).then(resp=>{
              console.log(resp)
              this.$model.msgSuccess("添加成功")
              this.formdialog.open = false
              this.searchalgor()
            })
          }
        }

      });
      }
  }

}
</script>

<template>
  <div id="app-algor">
    <!-- <p>算法模块</p> -->
     <!-- 面包屑 -->
     <el-row>
      <el-col :span="23" :offset="1" style="margin-bottom: 30px;margin-top: 20px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/algor' }" class="bread"><i class="el-icon-location-outline"></i>算法管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/algor' }" class="bread">算法仓库</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
<!--      <el-col :span="10" :offset="2">-->
<!--&lt;!&ndash;        <el-button round size="mini" @click="openAddDialog()"><i class="el-icon-plus"></i>&ensp;添加算法</el-button>&ndash;&gt;-->
<!--      </el-col>-->
      <el-col :span="8" :offset="4">
        <el-form @submit.native.prevent :model="queryParam" ref="queryForm" size="mini" :inline="true" class="formselect">
          <el-form-item  prop="roleName">
            <el-input
            class="inputem"

                v-model="queryParam.algorName"
                placeholder="请输入算法名称"
                clearable
                style="width: 200px"
                @keyup.enter.native="searchalgor"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchalgor">搜索</el-button>
  <!--          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 列表部分 -->
    <el-row type="flex" justify="center">
      <el-col :span="22">
        <div class="mytable">
          <el-table v-loading="loading" height="510" :data="tableData" class="tabletab" header-cell-class-name="table_header" stripe>
            <el-table-column label="算法序号" prop="algorId"></el-table-column>
            <el-table-column label="算法名称" prop="algorName"></el-table-column>
            <el-table-column label="算法调用码" prop="algorCode"></el-table-column>
<!--            <el-table-column label="创建时间" prop="createTime">-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ parseTime(scope.row.createTime) }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="操作" prop="operate">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit" plain>编辑</el-button>-->
<!--                <el-button size="mini" @click="handleDelete(scope.row)" icon="el-icon-delete" plain>删除</el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row>
      <el-col :span="8" :offset="15">
        <div class="block" >
          <pagination
          class="pager"
          v-show="total>0"
          :total="total"
          :page.sync="queryParam.pageNum"
          :limit.sync="queryParam.pageSize"
          @pagination="searchalgor"/>
        </div>
      </el-col>
    </el-row>
    <!-- 算法添加修改dialog -->
    <el-dialog :title="formdialog.title" :visible.sync="formdialog.open" :append-to-body="true" width="600px">
      <el-form ref="form" :model="AddForm" :rules="rules">
        <el-form-item label="算法名称：" :label-width="formLabelWidth" prop="algorName">
          <el-input v-model="AddForm.algorName" ></el-input>
        </el-form-item>
        <el-form-item label="算法调用码" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="AddForm.remark" ></el-input>
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth" prop="algorStatus">
            <el-switch v-model="AddForm.algorStatus" active-value="0"	 inactive-value="1"	 active-color="#4589BE" inactive-color="#C4CFD4"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formdialog.open = false" plain>取 消</el-button>
        <el-button @click="submitFrom" plain>确 定</el-button>
      </div>
    </el-dialog>


    <!-- 删除算法dialog -->
    <el-dialog
      title="提示"
      :visible.sync="DeleteFormdialogVisible"
      width="30%" :append-to-body="true">
      <span>是否确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DeleteFormdialogVisible = false" plain>取 消</el-button>
        <el-button @click="DeleteFormdialogVisible = false" plain>确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<style scoped>
.bread /deep/ .el-breadcrumb__inner{
  color: #000000;
}
.bread /deep/ .el-breadcrumb__inner:hover{color: #000000;}
.el-button{
  background-color: #4686D0;
  color: #ffffff;
  border: #4686D0;
  font-size: 12px;
  font-family: "微软雅黑";
}
.el-row{
  margin-top: 10px;
  /* margin-bottom:20px; */
}
.formselect /deep/ .el-form-item__label{
  color: #f2f2f2;
}
.el-input{
  width:250px;
}
.inputem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  border:1px solid #B1B4C5;
}
.inputem /deep/ .el-input__inner:focus{
  border:2px solid #4c87c2;
}
.inputem /deep/ .el-input__inner:hover{
  border:2px solid #4c87c2;
}

.inputem /deep/ .el-input-group__append{
  background-color: #265389;
  border:1px solid #265389;
}
.el-icon-search{
  color: #ffffff;
}
/* .tabletab /deep/ .el-table__header-wrapper{
  background-color: #131627;
  font-family: "微软雅黑";
  font-size: 14px;
} */


/*.tabletab /deep/ .el-table__row{*/
/*  background-color: #131627;*/
/*  font-family: "微软雅黑";*/
/*  font-size: 14px;*/
/*}*/
/* */
/*.tabletab /deep/ .el-table__body-wrapper{*/
/*  background-color: #131627;*/
/*  font-family: "微软雅黑";*/
/*  font-size: 14px;*/
/*}*/

/*::v-deep .cell{*/
/*  color:#ffffff;*/
/*}*/
/*::v-deep.el-table tbody tr:hover > td {*/
/*    background-color: #2b3b5256 !important;*/

/*    }*/
/* .tabletab /deep/ .table_header{*/
/*  background-color: #2b3b52 !important;*/
/*  width: 0;*/
/* }*/
/* .mytable /deep/ .el-table__row>td{*/
/*  !* 去除表格线 *!*/
/*  border-bottom:1px solid #2B3B52;*/
/*}*/
/*.mytable /deep/ .el-table th.is-leaf {*/
/*  !* 去除上边框 *!*/
/*    border: none;*/
/*}*/
/*::v-deep .el-table::before{*/
/*  !* 去除下边框 *!*/
/*  !* height: 0; *!*/
/*  background-color: #2B3B52;*/
/*  !* border:none; *!*/
/*}*/
/*.mytable /deep/ .el-table th.el-table__cell{*/
/*  background-color: #2b3b52;*/
/*}*/


</style>
